<!doctype html>

<html lang="zh">
<head>
    <title>1078</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-row :gutter="10">
        <el-col :span="12">
            <el-card class="box-card my-box">
                <div slot="header" class="clearfix">
                    <span>本示例仅仅支持 `WebSocket/Http` 协议</span>
                </div>
                <div>
                    <el-form size="mini">
                        <el-form-item label="SIM" size="mini">
                            <el-input v-model="sim"/>
                        </el-form-item>
                        <el-form-item label="逻辑通道号" size="mini">
                            <el-input v-model="channelNumber"/>
                        </el-form-item>
                        <el-form-item label="自动关闭Jt1078Session">
                            <el-checkbox v-model="autoCloseJt1078SessionOnClientClosed">是</el-checkbox>
                        </el-form-item>
                        <el-form-item label="视频流协议类型">
                            <el-radio-group v-model="videoProtocolType" size="mini">
                                <el-radio-button :label="'ws'">WebSocket</el-radio-button>
                                <el-radio-button :label="'http'">Http</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="1078服务IP">
                            <el-input type="text" v-model="jt1078ServerIp" size="mini" style="width: 140px"/>
                        </el-form-item>
                        <el-form-item label="1078服务端口(HTTP)">
                            <el-input-number v-model="jt1078ServerPortHttp" :controls="false" size="mini"
                                             style="width: 80px"/>
                        </el-form-item>
                        <el-form-item label="VideoUrl" size="mini">
                            <el-input v-model="videoUrl" type="textarea" autosize disabled
                                      style="width: 860px;font-size: 16px"/>
                        </el-form-item>
                        <br/>
                        <el-button type="primary" size="mini" @click="play">播放 / 重新初始化播放器</el-button>
                    </el-form>

                </div>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card class="box-card my-box">
                <div slot="header" class="clearfix">
                    <!--                    <span>播放器: 本示例仅仅支持 `WebSocket/Http` 协议</span>-->
                    {{ videoUrl }}
                </div>
                <div>
                    <video id="videoElement" width="640" height="480" controls autoplay
                           style="border: 3px solid #26cfee"></video>
                </div>
            </el-card>
        </el-col>
    </el-row>
</div>

</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.js"></script>
<script src="./js/mpegts.js"></script>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            player: undefined,
            playing: false,
            //
            sim: "018930946552",
            autoCloseJt1078SessionOnClientClosed: true,
            videoProtocolType: "ws",
            // 码流类型
            videoStreamType: 0,
            jt1078ServerIp: "127.0.0.1",
            channelNumber: 3,
            jt1078ServerPortHttp: 1078,
        },
        created: function () {
            this.jt1078ServerPortHttp = window.location.port
        },
        computed: {
            videoUrl: function () {
                return this.constructUrl()
            },
        },
        methods: {
            play: function () {
                this.recreatePlayer()
                this.player.play();
                this.playing = true
            },
            constructUrl: function () {
                return this.videoProtocolType
                    + "://"
                    + this.jt1078ServerIp
                    + ":"
                    + this.jt1078ServerPortHttp
                    + "/jt1078/subscription/"
                    + (this.videoProtocolType === 'ws' ? 'websocket' : 'http')
                    + "/flv/"
                    + this.sim
                    + "/" + this.channelNumber
                    + "?timeout=10000"
                    + "&autoCloseJt1078SessionOnClientClosed=" + this.autoCloseJt1078SessionOnClientClosed
            },
            recreatePlayer: function () {
                const element = document.getElementById('videoElement');
                if (this.player != null) {
                    this.player.unload();
                    this.player.detachMediaElement();
                    this.player.destroy();
                }
                const url = this.constructUrl()
                this.player = mpegts.createPlayer({
                    isLive: true,
                    type: 'flv',
                    url: url,
                    enableWorker: true,
                    enableStashBuffer: false,
                    stashInitialSize: 128    // 减少首桢显示等待时长
                });
                this.player.attachMediaElement(element);
                this.player.load();
            },
        },
        watch: {}
    })
</script>
<style type="text/css">
    .my-box {
        margin-bottom: 10px;
    }
</style>
</html>
